<template>
  <div class="login">
    <h1 class="title">欢迎登录</h1>
    <div class="loginDiv">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <br />
        <br />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div class="buttonDiv">
          <van-button round block type="info" native-type="submit"
            >登录</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import router from "@/router";
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  created() {},
  computed: {},
  methods: {
    onSubmit(values) {
      if (values.username == "admin" && values.password == "admin") {
        sessionStorage.setItem("isAuth", true);
        // console.log(sessionStorage.getItem("isAuth"));
        this.showFootTab.user = this.username;
        //使底部t导航栏tab显示
        this.showFootTab.isShow = true;
        this.$router.push("/my");
      } else {
        sessionStorage.setItem("isAuth", false);
        //弹框显示用户名密码错误
        this.$dialog
          .alert({
            message: "用户名、密码错误，请重新输入",
          })
          .then(() => {
            this.username = "";
            this.password = "";
          });
      }
    },
  },
};
</script>
<style scoped>
.login {
  width: 100%;
  height: 100%;
  position: fixed;
  background: url(../assets/background.jpg);
}
.title {
  color: white;
  margin-top: 100px;
  text-align: center;
}
.loginDiv {
  width: 100%;
  height: 250px;
  margin-top: 100px;
}
.buttonDiv {
  margin: 10px;
}
</style>
